<template>
	<view class="division-container">
		<!-- 分队方式选择 -->
		<view class="division-type">
			<view class="type-header">
				<text class="title">分队方式</text>
			</view>
			<view class="type-options">
				<view class="option" 
					:class="{ active: !division.isRandomTeam }"
					@tap="division.isRandomTeam = false"
				>
					<text>手动分队</text>
				</view>
				<view class="option" 
					:class="{ active: division.isRandomTeam }"
					@tap="division.isRandomTeam = true"
				>
					<text>随机分队</text>
				</view>
			</view>
		</view>

		<!-- 分队设置 -->
		<view class="division-settings">
			<!-- 是否允许选择队伍 -->
			<view class="setting-item">
				<text>允许选择队伍</text>
				<switch :checked="division.canChooseTeam" @change="e => division.canChooseTeam = e.detail.value" />
			</view>
			
			<!-- 每队人数限制 -->
			<view class="setting-item">
				<text>每队人数限制</text>
				<input type="number" v-model="division.teamLimit" placeholder="不限制" />
			</view>
		</view>

		<!-- 队伍列表 -->
		<view class="teams-section">
			<view class="teams-header">
				<text class="title">队伍设置</text>
			</view>
			<view class="team-list">
				<view class="team-item" v-for="(team, index) in division.teams" :key="index">
					<view class="team-input-wrapper">
						<input type="text" v-model="team.name" :placeholder="`队伍${index + 1}`" />
						<!-- 从第三个队伍开始显示删除按钮 -->
						<text v-if="index >= 2" class="delete-btn" @tap.stop="deleteTeam(index)">×</text>
					</view>
				</view>
				<view class="add-team" @tap="addTeam" v-if="division.teams.length < 4">
					<text>+ 添加队伍</text>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-actions">
			<button class="save-btn" @tap="saveDivision">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				division: {
					enabled: true,
					isRandomTeam: false,
					canChooseTeam: false,
					teamLimit: '',
					teams: [
						{ name: '红队' },
						{ name: '蓝队' }
					]
				}
			}
		},
		
		onLoad(options) {
			if (options.division) {
				try {
					this.division = JSON.parse(options.division)
				} catch (error) {
					console.error('解析分队数据失败:', error)
				}
			}
		},
		
		methods: {
			// 删除队伍
			deleteTeam(index) {
				// 只允许删除第三个及以后的队伍
				if (index >= 2) {
					uni.showModal({
						title: '提示',
						content: '确定要删除这个队伍吗？',
						success: (res) => {
							if (res.confirm) {
								this.division.teams.splice(index, 1)
							}
						}
					})
				}
			},
			
			// 添加队伍
			addTeam() {
				if (this.division.teams.length < 4) {
					this.division.teams.push({ name: '' })
				}
			},
			
			// 保存分队设置
			saveDivision() {
				// 验证队伍名称
				if (this.division.teams.some(team => !team.name)) {
					uni.showToast({
						title: '请填写队伍名称',
						icon: 'none'
					})
					return
				}
				
				// 使用事件通道返回数据
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('updateDivision', this.division)
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
.division-container {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: 120rpx;
	
	.division-type {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.type-header {
			margin-bottom: 20rpx;
			
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.type-options {
			display: flex;
			gap: 20rpx;
			
			.option {
				flex: 1;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #f5f5f5;
				border-radius: 8rpx;
				
				&.active {
					background: #ff6b35;
					color: #fff;
				}
			}
		}
	}
	
	.division-settings {
		background: #fff;
		padding: 0 30rpx;
		margin-bottom: 20rpx;
		
		.setting-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1px solid #f5f5f5;
			
			&:last-child {
				border-bottom: none;
			}
			
			text {
				font-size: 28rpx;
				color: #333;
			}
			
			input {
				text-align: right;
				font-size: 28rpx;
				color: #333;
			}
		}
	}
	
	.teams-section {
		background: #fff;
		padding: 30rpx;
		
		.teams-header {
			margin-bottom: 20rpx;
			
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.team-list {
			.team-item {
				margin-bottom: 20rpx;
				
				.team-input-wrapper {
					position: relative;
					display: flex;
					align-items: center;

					input {
						flex: 1;
						height: 80rpx;
						background: #f5f5f5;
						border-radius: 8rpx;
						padding: 0 20rpx;
						padding-right: 60rpx; // 为删除按钮留出空间
						font-size: 28rpx;
					}

					.delete-btn {
						position: absolute;
						right: 20rpx;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						color: #999;
						font-size: 32rpx;
						
						&:active {
							opacity: 0.7;
						}
					}
				}
			}
			
			.add-team {
				height: 80rpx;
				background: #f5f5f5;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #666;
				
				&:active {
					opacity: 0.7;
				}
			}
		}
	}
	
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background: #fff;
		
		.save-btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: #ff6b35;
			color: #fff;
			border-radius: 40rpx;
			font-size: 32rpx;
		}
	}
}
</style> 